
<template>
  <div
    class="show-imgs-container"
    @mouseover="isIn = true"
    @mouseout="isIn = false"
  >
    <el-carousel
      :interval="cutTime"
      arrow="always"
      :autoplay="autoplay"
      trigger="click"
      mute="true"
      show-mute-btn
      :indicator-position="autoplay ? 'none' : 'none'"
      @change="getIndex"
      class="changeImg"
    >
      <el-carousel-item v-for="(item, index) in videos" :key="`${item.src}${index}`">
        <!--视频播放器 -->
        <video :ref="'videoPlayer' + index" :controls="isIn" muted>
          <source :src="item.src" type="video/mp4" />
          您的浏览器不支持Video标签。
        </video>
        <!-- <video-player :ref="'videoPlayer' + index" class="video video-player vjs-custom-skin" :playsinline="true" :options="item.playerOptions"
                              @statechanged="playStatechanged($event,item)" @pause="onPlayerPause() "/> -->
        <i
          v-show="!isPlay"
          class="play-btn el-icon-video-play"
          @click="playVideo"
        ></i>
        <i
          v-show="isPlay && isIn"
          class="play-btn el-icon-video-pause"
          @click="pauseVideo"
        ></i>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
export default {
  name: "videoRepet",
  props: {
    title: {
      //模块标题
      type: String,
      default: "",
    },
    videos: {
      //视频数组
      type: Array,
      default: [],
    },
    videoHeight: {
      //视频数组
      type: String,
      default: "1",
    },
  },
  data() {
    return {
      autoplay: true, //是否自动切换
      isPlay: false, //播放状态
      isIn: false, //鼠标是否位于播放器内
      cutTime: 5000, //轮播时间，单位毫秒
      nowIndex: 0,
    };
  },
  mounted() {
    // this.videos.map(item =>{
    //     item.playerOptions ={
    //         playbackRates: [0.5, 1.0, 1.5, 2.0], //播放速度
    //         autoplay: true, //如果true,浏览器准备好时开始回放。
    //         loop: false, // 导致视频一结束就重新开始。
    //         muted: true, // 默认情况下将会消除任何音频。
    //         preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
    //         language: 'zh-CN',
    //         fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
    //         hls: true,
    //         html5: {
    //             hls: {
    //             withCredentials: false
    //             }
    //         },
    //         sources: [{
    //             type: 'application/x-mpegURL',
    //             src: '',
    //         }],
    //         aspectRatio: '16:9',
    //         poster: '', // 封面地址
    //         choosed: false, //被选中的
    //         notSupportedMessage: '无上传视频！', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
    //         controlBar: {
    //             timeDivider: false,
    //             durationDisplay: false,
    //             remainingTimeDisplay: false,
    //             fullscreenToggle: true  //全屏按钮
    //         },
    //         };
    //         item.playerOptions.sources[0].type = 'video/mp4';
    //         item.playerOptions.sources[0].src = item.src;
    // })
    //初始监听第一个视频
    this.listenVideo();
  },
  methods: {
    /**
     * 视频播放失败重新加载
     */
    playStatechanged(event, data) {
      if (event.playing === true) {
        data.playerOptions.sources[0].playing = true;
      }

      if (event.error === true && data.playerOptions.sources) {
        const sources = JSON.parse(JSON.stringify(data.playerOptions.sources));
        data.playerOptions.sources[0].src = "";
        let t = 2000;
        if (!data.playerOptions.sources[0].reload) {
          data.playerOptions.sources[0].reload = 1;

          t = 4000;
        }
        setTimeout(() => {
          if (
            data.playerOptions.sources &&
            !data.playerOptions.sources[0].src
          ) {
            data.playerOptions.sources[0].src = sources[0].src;
            data.playerOptions.sources[0].reload++;
          }
        }, t);
      }
    },
    //获取走马灯的索引
    getIndex(nowIndex, oldIndex) {
      //用户可能在上个视频未播放完毕就切换
      //此时需要暂停上个视频并把时间归零，否则影响对当前视频的监听逻辑
      let myVideo = this.$refs["videoPlayer" + oldIndex];
      myVideo[0] && myVideo[0].pause();
      myVideo[0] && (myVideo[0].currentTime = 0);
      this.nowIndex = nowIndex;
      this.listenVideo();
      // this.onPlayerPause();
    },
    //监听暂停事件
    onPlayerPause() {},
    //监听视频的播放、暂停、播放完毕等事件
    listenVideo() {
      //注意：这样获取的dom是一个数组，必须加上[0]索引才能正确的添加事件
      let myVideo = this.$refs["videoPlayer" + this.nowIndex];
      //监听播放
      myVideo[0].addEventListener("play", () => {
        this.autoplay = false;
        this.isPlay = true;
      });
      //监听暂停
      myVideo[0].addEventListener("pause", () => {
        this.autoplay = true;
        this.isPlay = false;
      });
      //监听播放完毕
      myVideo[0].addEventListener("ended", () => {
        //时间归零
        myVideo[0].currentTime = 0;
        this.autoplay = true;
        this.isPlay = false;
      });
    },
    // 播放视频
    playVideo() {
      //注意：这样获取的dom是一个数组，必须加上[0]索引才能正确的添加事件
      let myVideo = this.$refs["videoPlayer" + this.nowIndex];
      myVideo[0].play();
    },
    //暂停视频
    pauseVideo() {
      //注意：这样获取的dom是一个数组，必须加上[0]索引才能正确的添加事件
      let myVideo = this.$refs["videoPlayer" + this.nowIndex];
      myVideo[0].pause();
    },
  },
};
</script>
<style lang="scss" scoped >
.show-imgs-container {
  height: 100%;

  .el-carousel {
    width: 100%;
    height: 100%;
  }

  .el-carousel__container {
    width: 100%;
    height: 100%;
  }

  .el-carousel__item {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    video {
      width: 100%;
      height: 100%;
      position: fixed;
      display: inline-block;
      vertical-align: baseline;
      object-fit: fill; //消除留白
    }
    .play-btn {
      font-size: 60px;
      color: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      &:hover {
        cursor: pointer;
      }
    }
  }
}
.show-imgs-container-new {
  height: 253px;

  .el-carousel {
    width: 100%;
    height: 253px;
  }

  .el-carousel__container {
    width: 100%;
    height: 253px;
  }

  .el-carousel__item {
    width: 100%;
    height: 253px;
    border-radius: 10px;
    video {
      width: 100%;
      height: 253px;
      position: fixed;
      display: inline-block;
      vertical-align: baseline;
      object-fit: fill; //消除留白
    }
    .play-btn {
      font-size: 60px;
      color: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      &:hover {
        cursor: pointer;
      }
    }
  }
}
.show-imgs-container-new2 {
  height: 340px;

  .el-carousel {
    width: 100%;
    height: 340px;
  }

  .el-carousel__container {
    width: 100%;
    height: 340px;
  }

  .el-carousel__item {
    width: 100%;
    height: 340px;
    border-radius: 10px;
    video {
      width: 100%;
      height: 340px;
      position: fixed;
      display: inline-block;
      vertical-align: baseline;
      object-fit: fill; //消除留白
    }
    .play-btn {
      font-size: 60px;
      color: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
